<template>
  <div class="flex w-full h-full justify-between bg-white p-[20px] rounded-2xl">
    <a-input
      ref="select"
      v-model:value="inputValue"
      style="width: 240px"
      placeholder="请输入用户昵称"
      allow-clear
      @change="handleInputChange"
    />
    <div class="w-200px">
      <a-button type="primary" :loading="loading" @click="handleSearchClick">
        <template #icon> <SearchOutlined /> </template>
        查询
      </a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { SearchOutlined } from '@ant-design/icons-vue'
import { ref, watch } from 'vue'

interface Props {
  selectValue?: string
  loading: boolean
}

const props = withDefaults(defineProps<Props>(), {
  selectValue: '',
  loading: false,
})
const emit = defineEmits<{
  'update:selectValue': [value: string]
  'update:loading': [value: boolean]
  search: []
}>()

const inputValue = ref<string>(props.selectValue)

watch(
  () => props.loading,
  (newVal) => {
    emit('update:loading', newVal)
  },
)
watch(
  () => props.selectValue,
  (newVal) => {
    inputValue.value = newVal
  },
)
const handleInputChange = () => {
  emit('update:selectValue', inputValue.value)
}

// 处理查询事件
const handleSearchClick = () => {
  emit('search')
}
</script>
<style lang="scss" scoped></style>
